<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Checkbox 多选框</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style type="text/css">
.ant-checkbox-wrapper{
	margin-left: 20px;
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">简单的 checkbox</p>
	<a-checkbox v-model:checked="checked1">Checkbox</a-checkbox>
	
	<a-divider class="a-divi" orientation="left">受控的 checkbox</a-divider><!-- =============================================================== -->
	<p class="desc">联动checkbox</p>
	<p :style="{ marginBottom: '20px' }">
		<a-checkbox v-model:checked="checked2" :disabled="disabled2">{{ label2 }}</a-checkbox>
	</p>
	<p style="margin-left: 20px;">
		<a-button type="primary" size="small" @click="toggleChecked2">
			{{ !checked2 ? 'Check' : 'Uncheck' }}
		</a-button>
		<a-button :style="{ marginLeft: '10px' }" type="primary" size="small" @click="toggleDisable2">
			{{ !disabled2 ? 'Disable' : 'Enable' }}
		</a-button>
	</p>
	
	<a-divider class="a-divi" orientation="left">Checkbox 组</a-divider><!-- =============================================================== -->
	<p class="desc">方便的从数组生成 checkbox</p>
	<a-checkbox-group v-model:value="state3.value1" name="checkboxgroup" :options="plainOptions3"></a-checkbox-group>
	<br />
	<br />
	<a-checkbox-group v-model:value="state3.value2" :options="plainOptions3"></a-checkbox-group>
	<br />
	<br />
	<a-checkbox-group v-model:value="state3.value3" :options="options3"></a-checkbox-group>
	<br />
	<br />
	<a-checkbox-group v-model:value="state3.value4" :options="optionsWithDisabled3" disabled>
		<template #label="{ label }">
			<span style="color: red">{{ label }}</span>
		</template>
	</a-checkbox-group>
	
	<a-divider class="a-divi" orientation="left">全选</a-divider><!-- =============================================================== -->
	<p class="desc">在实现全选效果时，你可能会用到 indeterminate 属性</p>
	<a-checkbox v-model:checked="state4.checkAll" :indeterminate="state4.indeterminate" @change="onCheckAllChange4">
		Check all
	</a-checkbox>
	<a-divider></a-divider>
	<a-checkbox-group v-model:value="state4.checkedList" :options="plainOptions4"></a-checkbox-group>
	
	<a-divider class="a-divi" orientation="left">不可用</a-divider><!-- =============================================================== -->
	<p class="desc">checkbox 不可用</p>
	<a-checkbox v-model:checked="state5.checked1" disabled></a-checkbox>
	<br />
	<a-checkbox v-model:checked="state5.checked2" disabled></a-checkbox>
	
	<a-divider class="a-divi" orientation="left">布局</a-divider><!-- =============================================================== -->
	<p class="desc">Checkbox.Group 内嵌 Checkbox 并与 Grid 组件一起使用，可以实现灵活的布局</p>
	<a-checkbox-group v-model:value="value6" style="width: 50%">
		<a-row>
			<a-col :span="8">
				<a-checkbox value="A">A</a-checkbox>
			</a-col>
			<a-col :span="8">
				<a-checkbox value="B">B</a-checkbox>
			</a-col>
			<a-col :span="8">
				<a-checkbox value="C">C</a-checkbox>
			</a-col>
			<a-col :span="8">
				<a-checkbox value="D">D</a-checkbox>
			</a-col>
			<a-col :span="8">
				<a-checkbox value="E">E</a-checkbox>
			</a-col>
		</a-row>
	</a-checkbox-group>
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
return {
	checked1: false,
	
	checked2: false,
	disabled2: false,
	
	state3: {
		value1: [],
		value2: ['Apple'],
		value3: ['Pear'],
		value4: ['Apple'],
	},
	plainOptions3: ['Apple', 'Pear', 'Orange'],
	options3: [
		{ label: '苹果', value: 'Apple' },
		{ label: '梨', value: 'Pear' },
		{ label: '橙子', value: 'Orange' },
	],
	optionsWithDisabled3: [
		{ label: 'Apple', value: 'Apple' },
		{ label: 'Pear', value: 'Pear' },
		{ label: 'Orange', value: 'Orange', disabled: false },
	],
	
	state4: {
		indeterminate: true,
		checkAll: false,
		checkedList: ['Apple', 'Orange'],
	},
	plainOptions4: ['Apple', 'Pear', 'Orange'],
	
	state5: {
		checked1: false,
		checked2: true,
	},
	
	value6: [],
}
},
computed:{
	label2(){
		return `${this.checked2 ? 'Checked' : 'Unchecked'}-${this.disabled2 ? 'Disabled' : 'Enabled'}`;
	},
	
},
methods:{
	toggleChecked2(){
		this.checked2 = !this.checked2;
	},
	toggleDisable2(){
		this.disabled2 = !this.disabled2;
	},
	
	onCheckAllChange4(e){
		console.log(e);
		Object.assign(this.state4, {
			checkedList: e.target.checked ? this.plainOptions4 : [],
			indeterminate: false,
		});
	},
	
},
watch:{
	'state4.checkedList':function(val){
		// console.log(val);
		this.state4.indeterminate = !!this.state4.checkedList.length && this.state4.checkedList.length < this.plainOptions4.length;
		this.state4.checkAll = this.state4.checkedList.length === this.plainOptions4.length;
	},
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
